<!doctype html><html lang="en">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <title>Web Bluetooth Use Cases</title>
<style data-fill-with="stylesheet">/******************************************************************************
 *                   Style sheet for the W3C specifications                   *
 *
 * Special classes handled by this style sheet include:
 *
 * Indices
 *   - .toc for the Table of Contents (<ol class="toc">)
 *     + <span class="secno"> for the section numbers
 *   - #toc for the Table of Contents (<nav id="toc">)
 *   - ul.index for Indices (<a href="#ref">term</a><span>, in §N.M</span>)
 *   - table.index for Index Tables (e.g. for properties or elements)
 *
 * Structural Markup
 *   - table.data for general data tables
 *     -> use 'scope' attribute, <colgroup>, <thead>, and <tbody> for best results !
 *     -> use <table class='complex data'> for extra-complex tables
 *     -> use <td class='long'> for paragraph-length cell content
 *     -> use <td class='pre'> when manual line breaks/indentation would help readability
 *   - dl.switch for switch statements
 *   - ol.algorithm for algorithms (helps to visualize nesting)
 *   - .figure and .caption (HTML4) and figure and figcaption (HTML5)
 *     -> .sidefigure for right-floated figures
 *   - ins/del
 *
 * Code
 *   - pre and code
 *
 * Special Sections
 *   - .note       for informative notes             (div, p, span, aside, details)
 *   - .example    for informative examples          (div, p, pre, span)
 *   - .issue      for issues                        (div, p, span)
 *   - .assertion  for assertions                    (div, p, span)
 *   - .advisement for loud normative statements     (div, p, strong)
 *   - .annoying-warning for spec obsoletion notices (div, aside, details)
 *
 * Definition Boxes
 *   - pre.def   for WebIDL definitions
 *   - table.def for tables that define other entities (e.g. CSS properties)
 *   - dl.def    for definition lists that define other entitles (e.g. HTML elements)
 *
 * Numbering
 *   - .secno for section numbers in .toc and headings (<span class='secno'>3.2</span>)
 *   - .marker for source-inserted example/figure/issue numbers (<span class='marker'>Issue 4</span>)
 *   - ::before styled for CSS-generated issue/example/figure numbers:
 *     -> Documents wishing to use this only need to add
 *        figcaption::before,
 *        .caption::before { content: "Figure "  counter(figure) " ";  }
 *        .example::before { content: "Example " counter(example) " "; }
 *        .issue::before   { content: "Issue "   counter(issue) " ";   }
 *
 * Header Stuff (ignore, just don't conflict with these classes)
 *   - .head for the header
 *   - .copyright for the copyright
 *
 * Miscellaneous
 *   - .overlarge for things that should be as wide as possible, even if
 *     that overflows the body text area. This can be used on an item or
 *     on its container, depending on the effect desired.
 *     Note that this styling basically doesn't help at all when printing,
 *     since A4 paper isn't much wider than the max-width here.
 *     It's better to design things to fit into a narrower measure if possible.
 *   - js-added ToC jump links (see fixup.js)
 *
 ******************************************************************************/

/******************************************************************************/
/*                                   Body                                     */
/******************************************************************************/

	body {
		counter-reset: example figure issue;

		/* Layout */
		max-width: 50em;               /* limit line length to 50em for readability   */
		margin: 0 auto;                /* center text within page                     */
		padding: 1.6em 1.5em 2em 50px; /* assume 16px font size for downlevel clients */
		padding: 1.6em 1.5em 2em calc(26px + 1.5em); /* leave space for status flag     */

		/* Typography */
		line-height: 1.5;
		font-family: sans-serif;
		widows: 2;
		orphans: 2;
		word-wrap: break-word;
		overflow-wrap: break-word;
		hyphens: auto;

		/* Colors */
		color: black;
		background: white top left fixed no-repeat;
		background-size: 25px auto;
	}


/******************************************************************************/
/*                         Front Matter & Navigation                          */
/******************************************************************************/

/** Header ********************************************************************/

	div.head { margin-bottom: 1em }
	div.head hr { border-style: solid; }

	div.head h1 {
		font-weight: bold;
		margin: 0 0 .1em;
		font-size: 220%;
	}

	div.head h2 { margin-bottom: 1.5em;}

/** W3C Logo ******************************************************************/

	.head .logo {
		float: right;
		margin: 0.4rem 0 0.2rem .4rem;
	}

	.head img[src*="logos/W3C"] {
		display: block;
		border: solid #1a5e9a;
		border-width: .65rem .7rem .6rem;
		border-radius: .4rem;
		background: #1a5e9a;
		color: white;
		font-weight: bold;
	}

	.head a:hover > img[src*="logos/W3C"],
	.head a:focus > img[src*="logos/W3C"] {
		opacity: .8;
	}

	.head a:active > img[src*="logos/W3C"] {
		background: #c00;
		border-color: #c00;
	}

	/* see also additional rules in Link Styling section */

/** Copyright *****************************************************************/

	p.copyright,
	p.copyright small { font-size: small }

/** Back to Top / ToC Toggle **************************************************/

	@media print {
		#toc-nav {
			display: none;
		}
	}
	@media not print {
		#toc-nav {
			position: fixed;
			z-index: 2;
			bottom: 0; left: 0;
			margin: 0;
			min-width: 1.33em;
			border-top-right-radius: 2rem;
			box-shadow: 0 0 2px;
			font-size: 1.5em;
			color: black;
		}
		#toc-nav > a {
			display: block;
			white-space: nowrap;

			height: 1.33em;
			padding: .1em 0.3em;
			margin: 0;

			background: white;
			box-shadow: 0 0 2px;
			border: none;
			border-top-right-radius: 1.33em;
			background: white;
		}
		#toc-nav > #toc-jump {
			padding-bottom: 2em;
			margin-bottom: -1.9em;
		}

		#toc-nav > a:hover,
		#toc-nav > a:focus {
			background: #f8f8f8;
		}
		#toc-nav > a:not(:hover):not(:focus) {
			color: #707070;
		}

		/* statusbar gets in the way on keyboard focus; remove once browsers fix */
		#toc-nav > a[href="#toc"]:not(:hover):focus:last-child {
			padding-bottom: 1.5rem;
		}

		#toc-nav:not(:hover) > a:not(:focus) > span + span {
			/* Ideally this uses :focus-within on #toc-nav */
			display: none;
		}
		#toc-nav > a > span + span {
			padding-right: 0.2em;
		}

		#toc-toggle-inline {
			vertical-align: 0.05em;
			font-size: 80%;
			color: gray;
			color: hsla(203,20%,40%,.7);
			border-style: none;
			background: transparent;
			position: relative;
		}
		#toc-toggle-inline:hover:not(:active),
		#toc-toggle-inline:focus:not(:active) {
			text-shadow: 1px 1px silver;
			top: -1px;
			left: -1px;
		}

		#toc-nav :active {
			color: #C00;
		}
	}

/** ToC Sidebar ***************************************************************/

	/* Floating sidebar */
	@media screen {
		body.toc-sidebar #toc {
			position: fixed;
			top: 0; bottom: 0;
			left: 0;
			width: 23.5em;
			max-width: 80%;
			max-width: calc(100% - 2em - 26px);
			overflow: auto;
			padding: 0 1em;
			padding-left: 42px;
			padding-left: calc(1em + 26px);
			background: inherit;
			background-color: #f7f8f9;
			z-index: 1;
			box-shadow: -.1em 0 .25em rgba(0,0,0,.1) inset;
		}
		body.toc-sidebar #toc h2 {
			margin-top: .8rem;
			font-variant: small-caps;
			font-variant: all-small-caps;
			text-transform: lowercase;
			font-weight: bold;
			color: gray;
			color: hsla(203,20%,40%,.7);
		}
		body.toc-sidebar #toc-jump:not(:focus) {
			width: 0;
			height: 0;
			padding: 0;
			position: absolute;
			overflow: hidden;
		}
	}
	/* Hide main scroller when only the ToC is visible anyway */
	@media screen and (max-width: 28em) {
		body.toc-sidebar {
			overflow: hidden;
		}
	}

	/* Sidebar with its own space */
	@media screen and (min-width: 78em) {
		body:not(.toc-inline) #toc {
			position: fixed;
			top: 0; bottom: 0;
			left: 0;
			width: 23.5em;
			overflow: auto;
			padding: 0 1em;
			padding-left: 42px;
			padding-left: calc(1em + 26px);
			background: inherit;
			background-color: #f7f8f9;
			z-index: 1;
			box-shadow: -.1em 0 .25em rgba(0,0,0,.1) inset;
		}
		body:not(.toc-inline) #toc h2 {
			margin-top: .8rem;
			font-variant: small-caps;
			font-variant: all-small-caps;
			text-transform: lowercase;
			font-weight: bold;
			color: gray;
			color: hsla(203,20%,40%,.7);
		}

		body:not(.toc-inline) {
			padding-left: 29em;
		}
		/* See also Overflow section at the bottom */

		body:not(.toc-inline) #toc-jump:not(:focus) {
			width: 0;
			height: 0;
			padding: 0;
			position: absolute;
			overflow: hidden;
		}
	}
	@media screen and (min-width: 90em) {
		body:not(.toc-inline) {
			margin: 0 4em;
		}
	}

/******************************************************************************/
/*                                Sectioning                                  */
/******************************************************************************/

/** Headings ******************************************************************/

	h1, h2, h3, h4, h5, h6, dt {
		page-break-after: avoid;
		page-break-inside: avoid;
		font: 100% sans-serif;   /* Reset all font styling to clear out UA styles */
		font-family: inherit;    /* Inherit the font family. */
		line-height: 1.2;        /* Keep wrapped headings compact */
		hyphens: manual;         /* Hyphenated headings look weird */
	}

	h2, h3, h4, h5, h6 {
		margin-top: 3rem;
	}

	h1, h2, h3 {
		color: #005A9C;
		background: transparent;
	}

	h1 { font-size: 170%; }
	h2 { font-size: 140%; }
	h3 { font-size: 120%; }
	h4 { font-weight: bold; }
	h5 { font-style: italic; }
	h6 { font-variant: small-caps; }
	dt { font-weight: bold; }

/** Subheadings ***************************************************************/

	h1 + h2,
	#subtitle {
		/* #subtitle is a subtitle in an H2 under the H1 */
		margin-top: 0;
	}
	h2 + h3,
	h3 + h4,
	h4 + h5,
	h5 + h6 {
		margin-top: 1.2em; /* = 1 x line-height */
	}

/** Section divider ***********************************************************/

	:not(.head) > hr {
		font-size: 1.5em;
		text-align: center;
		margin: 1em auto;
		height: auto;
		border: transparent solid 0;
		background: transparent;
	}
	:not(.head) > hr::before {
		content: "\2727\2003\2003\2727\2003\2003\2727";
	}

/******************************************************************************/
/*                            Paragraphs and Lists                            */
/******************************************************************************/

	p {
		margin: 1em 0;
	}

	dd > p:first-child,
	li > p:first-child {
		margin-top: 0;
	}

	ul, ol {
		margin-left: 0;
		padding-left: 2em;
	}

	li {
		margin: 0.25em 0 0.5em;
		padding: 0;
	}

	dl dd {
		margin: 0 0 .5em 2em;
	}

	.head dd + dd { /* compact for header */
		margin-top: -.5em;
	}

	/* Style for algorithms */
	ol.algorithm ol:not(.algorithm),
	.algorithm > ol ol:not(.algorithm) {
	 border-left: 0.5em solid #DEF;
	}

	/* Put nice boxes around each algorithm. */
	[data-algorithm]:not(.heading) {
	  padding: .5em;
	  border: thin solid #ddd; border-radius: .5em;
	  margin: .5em calc(-0.5em - 1px);
	}
	[data-algorithm]:not(.heading) > :first-child {
	  margin-top: 0;
	}
	[data-algorithm]:not(.heading) > :last-child {
	  margin-bottom: 0;
	}

	/* Style for switch/case <dl>s */
	dl.switch > dd > ol.only,
	dl.switch > dd > .only > ol {
	 margin-left: 0;
	}
	dl.switch > dd > ol.algorithm,
	dl.switch > dd > .algorithm > ol {
	 margin-left: -2em;
	}
	dl.switch {
	 padding-left: 2em;
	}
	dl.switch > dt {
	 text-indent: -1.5em;
	 margin-top: 1em;
	}
	dl.switch > dt + dt {
	 margin-top: 0;
	}
	dl.switch > dt::before {
	 content: '\21AA';
	 padding: 0 0.5em 0 0;
	 display: inline-block;
	 width: 1em;
	 text-align: right;
	 line-height: 0.5em;
	}

/** Terminology Markup ********************************************************/


/******************************************************************************/
/*                                 Inline Markup                              */
/******************************************************************************/

/** Terminology Markup ********************************************************/
	dfn   { /* Defining instance */
		font-weight: bolder;
	}
	a > i { /* Instance of term */
		font-style: normal;
	}
	dt dfn code, code.idl {
		font-size: medium;
	}
	dfn var {
		font-style: normal;
	}

/** Change Marking ************************************************************/

	del { color: red;  text-decoration: line-through; }
	ins { color: #080; text-decoration: underline;    }

/** Miscellaneous improvements to inline formatting ***************************/

	sup {
		vertical-align: super;
		font-size: 80%
	}

/******************************************************************************/
/*                                    Code                                    */
/******************************************************************************/

/** General monospace/pre rules ***********************************************/

	pre, code, samp {
		font-family: Menlo, Consolas, "DejaVu Sans Mono", Monaco, monospace;
		font-size: .9em;
		page-break-inside: avoid;
		hyphens: none;
		text-transform: none;
	}
	pre code,
	code code {
		font-size: 100%;
	}

	pre {
		margin-top: 1em;
		margin-bottom: 1em;
		overflow: auto;
	}

/** Inline Code fragments *****************************************************/

  /* Do something nice. */

/******************************************************************************/
/*                                    Links                                   */
/******************************************************************************/

/** General Hyperlinks ********************************************************/

	/* We hyperlink a lot, so make it less intrusive */
	a[href] {
		color: #034575;
		text-decoration: none;
		border-bottom: 1px solid #707070;
		/* Need a bit of extending for it to look okay */
		padding: 0 1px 0;
		margin: 0 -1px 0;
	}
	a:visited {
		border-bottom-color: #BBB;
	}

	/* Use distinguishing colors when user is interacting with the link */
	a[href]:focus,
	a[href]:hover {
		background: #f8f8f8;
		background: rgba(75%, 75%, 75%, .25);
		border-bottom-width: 3px;
		margin-bottom: -2px;
	}
	a[href]:active {
		color: #C00;
		border-color: #C00;
	}

	/* Backout above styling for W3C logo */
	.head .logo,
	.head .logo a {
		border: none;
		text-decoration: none;
		background: transparent;
	}

/******************************************************************************/
/*                                    Images                                  */
/******************************************************************************/

	img {
		border-style: none;
	}

	/* For autogen numbers, add
	   .caption::before, figcaption::before { content: "Figure " counter(figure) ". "; }
	*/

	figure, .figure, .sidefigure {
		page-break-inside: avoid;
		text-align: center;
		margin: 2.5em 0;
	}
	.figure img,    .sidefigure img,    figure img,
	.figure object, .sidefigure object, figure object {
		max-width: 100%;
		margin: auto;
	}
	.figure pre, .sidefigure pre, figure pre {
		text-align: left;
		display: table;
		margin: 1em auto;
	}
	.figure table, figure table {
		margin: auto;
	}
	@media screen and (min-width: 20em) {
		.sidefigure {
			float: right;
			width: 50%;
			margin: 0 0 0.5em 0.5em
		}
	}
	.caption, figcaption, caption {
		font-style: italic;
		font-size: 90%;
	}
	.caption::before, figcaption::before, figcaption > .marker {
		font-weight: bold;
	}
	.caption, figcaption {
		counter-increment: figure;
	}

	/* DL list is indented 2em, but figure inside it is not */
	dd > .figure, dd > figure { margin-left: -2em }

/******************************************************************************/
/*                             Colored Boxes                                  */
/******************************************************************************/

	.issue, .note, .example, .assertion, .advisement, blockquote {
		padding: .5em;
		border: .5em;
		border-left-style: solid;
		page-break-inside: avoid;
	}
	span.issue, span.note {
		padding: .1em .5em .15em;
		border-right-style: solid;
	}

	.issue,
	.note,
	.example,
	.advisement,
	.assertion,
	blockquote {
		margin: 1em auto;
	}
	.note  > p:first-child,
	.issue > p:first-child,
	blockquote > :first-child {
		margin-top: 0;
	}
	blockquote > :last-child {
		margin-bottom: 0;
	}

/** Blockquotes ***************************************************************/

	blockquote {
		border-color: silver;
	}

/** Open issue ****************************************************************/

	.issue {
		border-color: #E05252;
		background: #FBE9E9;
		counter-increment: issue;
		overflow: auto;
	}
	.issue::before, .issue > .marker {
		text-transform: uppercase;
		color: #AE1E1E;
		padding-right: 1em;
		text-transform: uppercase;
	}
	/* Add .issue::before { content: "Issue " counter(issue) " "; } for autogen numbers,
	   or use class="marker" to mark up the issue number in source. */

/** Example *******************************************************************/

	.example {
		border-color: #E0CB52;
		background: #FCFAEE;
		counter-increment: example;
		overflow: auto;
		clear: both;
	}
	.example::before, .example > .marker {
		text-transform: uppercase;
		color: #827017;
		min-width: 7.5em;
		display: block;
	}
	/* Add .example::before { content: "Example " counter(example) " "; } for autogen numbers,
	   or use class="marker" to mark up the example number in source. */

/** Non-normative Note ********************************************************/

	.note {
		border-color: #52E052;
		background: #E9FBE9;
		overflow: auto;
	}

	.note::before, .note > .marker,
	details.note > summary::before,
	details.note > summary > .marker {
		text-transform: uppercase;
		display: block;
		color: hsl(120, 70%, 30%);
	}
	/* Add .note::before { content: "Note"; } for autogen label,
	   or use class="marker" to mark up the label in source. */

	details.note > summary {
		display: block;
		color: hsl(120, 70%, 30%);
	}
	details.note[open] > summary {
		border-bottom: 1px silver solid;
	}

/** Assertion Box *************************************************************/
	/*  for assertions in algorithms */

	.assertion {
		border-color: #AAA;
		background: #EEE;
	}

/** Advisement Box ************************************************************/
	/*  for attention-grabbing normative statements */

	.advisement {
		border-color: orange;
		border-style: none solid;
		background: #FFEECC;
	}
	strong.advisement {
		display: block;
		text-align: center;
	}
	.advisement > .marker {
		color: #B35F00;
	}

/** Spec Obsoletion Notice ****************************************************/
	/* obnoxious obsoletion notice for older/abandoned specs. */

	details {
		display: block;
	}
	summary {
		font-weight: bolder;
	}

	.annoying-warning:not(details),
	details.annoying-warning:not([open]) > summary,
	details.annoying-warning[open] {
		background: #fdd;
		color: red;
		font-weight: bold;
		padding: .75em 1em;
		border: thick red;
		border-style: solid;
		border-radius: 1em;
	}
	.annoying-warning :last-child {
		margin-bottom: 0;
	}

@media not print {
	details.annoying-warning[open] {
		position: fixed;
		left: 1em;
		right: 1em;
		bottom: 1em;
		z-index: 1000;
	}
}

	details.annoying-warning:not([open]) > summary {
		text-align: center;
	}

/** Entity Definition Boxes ***************************************************/

	.def {
		padding: .5em 1em;
		background: #DEF;
		margin: 1.2em 0;
		border-left: 0.5em solid #8CCBF2;
	}

/******************************************************************************/
/*                                    Tables                                  */
/******************************************************************************/

	th, td {
		text-align: left;
		text-align: start;
	}

/** Property/Descriptor Definition Tables *************************************/

	table.def {
		/* inherits .def box styling, see above */
		width: 100%;
		border-spacing: 0;
	}

	table.def td,
	table.def th {
		padding: 0.5em;
		vertical-align: baseline;
		border-bottom: 1px solid #bbd7e9;
	}

	table.def > tbody > tr:last-child th,
	table.def > tbody > tr:last-child td {
		border-bottom: 0;
	}

	table.def th {
		font-style: italic;
		font-weight: normal;
		padding-left: 1em;
		width: 3em;
	}

	/* For when values are extra-complex and need formatting for readability */
	table td.pre {
		white-space: pre-wrap;
	}

	/* A footnote at the bottom of a def table */
	table.def           td.footnote {
		padding-top: 0.6em;
	}
	table.def           td.footnote::before {
		content: " ";
		display: block;
		height: 0.6em;
		width: 4em;
		border-top: thin solid;
	}

/** Data tables (and properly marked-up index tables) *************************/
	/*
		 <table class="data"> highlights structural relationships in a table
		 when correct markup is used (e.g. thead/tbody, th vs. td, scope attribute)

		 Use class="complex data" for particularly complicated tables --
		 (This will draw more lines: busier, but clearer.)

		 Use class="long" on table cells with paragraph-like contents
		 (This will adjust text alignment accordingly.)
		 Alternately use class="longlastcol" on tables, to have the last column assume "long".
	*/

	table {
		word-wrap: normal;
		overflow-wrap: normal;
		hyphens: manual;
	}

	table.data,
	table.index {
		margin: 1em auto;
		border-collapse: collapse;
		border: hidden;
		width: 100%;
	}
	table.data caption,
	table.index caption {
		max-width: 50em;
		margin: 0 auto 1em;
	}

	table.data td,  table.data th,
	table.index td, table.index th {
		padding: 0.5em 1em;
		border-width: 1px;
		border-color: silver;
		border-top-style: solid;
	}

	table.data thead td:empty {
		padding: 0;
		border: 0;
	}

	table.data  thead,
	table.index thead,
	table.data  tbody,
	table.index tbody {
		border-bottom: 2px solid;
	}

	table.data colgroup,
	table.index colgroup {
		border-left: 2px solid;
	}

	table.data  tbody th:first-child,
	table.index tbody th:first-child  {
		border-right: 2px solid;
		border-top: 1px solid silver;
		padding-right: 1em;
	}

	table.data th[colspan],
	table.data td[colspan] {
		text-align: center;
	}

	table.complex.data th,
	table.complex.data td {
		border: 1px solid silver;
		text-align: center;
	}

	table.data.longlastcol td:last-child,
	table.data td.long {
	 vertical-align: baseline;
	 text-align: left;
	}

	table.data img {
		vertical-align: middle;
	}


/*
Alternate table alignment rules

	table.data,
	table.index {
		text-align: center;
	}

	table.data  thead th[scope="row"],
	table.index thead th[scope="row"] {
		text-align: right;
	}

	table.data  tbody th:first-child,
	table.index tbody th:first-child  {
		text-align: right;
	}

Possible extra rowspan handling

	table.data  tbody th[rowspan]:not([rowspan='1']),
	table.index tbody th[rowspan]:not([rowspan='1']),
	table.data  tbody td[rowspan]:not([rowspan='1']),
	table.index tbody td[rowspan]:not([rowspan='1']) {
		border-left: 1px solid silver;
	}

	table.data  tbody th[rowspan]:first-child,
	table.index tbody th[rowspan]:first-child,
	table.data  tbody td[rowspan]:first-child,
	table.index tbody td[rowspan]:first-child{
		border-left: 0;
		border-right: 1px solid silver;
	}
*/

/******************************************************************************/
/*                                  Indices                                   */
/******************************************************************************/


/** Table of Contents *********************************************************/

	.toc a {
		/* More spacing; use padding to make it part of the click target. */
		padding-top: 0.1rem;
		/* Larger, more consistently-sized click target */
		display: block;
		/* Reverse color scheme */
		color: black;
		border-color: #3980B5;
		border-bottom-width: 3px !important;
		margin-bottom: 0px !important;
	}
	.toc a:visited {
		border-color: #054572;
	}
	.toc a:not(:focus):not(:hover) {
		/* Allow colors to cascade through from link styling */
		border-bottom-color: transparent;
	}

	.toc, .toc ol, .toc ul, .toc li {
		list-style: none; /* Numbers must be inlined into source */
		/* because generated content isn't search/selectable and markers can't do multilevel yet */
		margin:  0;
		padding: 0;
		line-height: 1.1rem; /* consistent spacing */
	}

	/* ToC not indented until third level, but font style & margins show hierarchy */
	.toc > li             { font-weight: bold;   }
	.toc > li li          { font-weight: normal; }
	.toc > li li li       { font-size:   95%;    }
	.toc > li li li li    { font-size:   90%;    }
	.toc > li li li li .secno { font-size: 85%; }
	.toc > li li li li li { font-size:   85%;    }
	.toc > li li li li li .secno { font-size: 100%; }

	/* @supports not (display:grid) { */
		.toc > li             { margin: 1.5rem 0;    }
		.toc > li li          { margin: 0.3rem 0;    }
		.toc > li li li       { margin-left: 2rem;   }

		/* Section numbers in a column of their own */
		.toc .secno {
			float: left;
			width: 4rem;
			white-space: nowrap;
		}

		.toc li {
			clear: both;
		}

		:not(li) > .toc              { margin-left:  5rem; }
		.toc .secno                  { margin-left: -5rem; }
		.toc > li li li .secno       { margin-left: -7rem; }
		.toc > li li li li .secno    { margin-left: -9rem; }
		.toc > li li li li li .secno { margin-left: -11rem; }

		/* Tighten up indentation in narrow ToCs */
		@media (max-width: 30em) {
			:not(li) > .toc              { margin-left:  4rem; }
			.toc .secno                  { margin-left: -4rem; }
			.toc > li li li              { margin-left:  1rem; }
			.toc > li li li .secno       { margin-left: -5rem; }
			.toc > li li li li .secno    { margin-left: -6rem; }
			.toc > li li li li li .secno { margin-left: -7rem; }
		}
	/* } */

	@supports (display:grid) and (display:contents) {
		/* Use #toc over .toc to override non-@supports rules. */
		#toc {
			display: grid;
			align-content: start;
			grid-template-columns: auto 1fr;
			grid-column-gap: 1rem;
			column-gap: 1rem;
			grid-row-gap: .6rem;
			row-gap: .6rem;
		}
		#toc h2 {
			grid-column: 1 / -1;
			margin-bottom: 0;
		}
		#toc ol,
		#toc li,
		#toc a {
			display: contents;
			/* Switch <a> to subgrid when supported */
		}
		#toc span {
			margin: 0;
		}
		#toc > .toc > li > a > span {
			/* The spans of the top-level list,
			   comprising the first items of each top-level section. */
			margin-top: 1.1rem;
		}
		#toc#toc .secno { /* Ugh, need more specificity to override base.css */
			grid-column: 1;
			width: auto;
			margin-left: 0;
		}
		#toc .content {
			grid-column: 2;
			width: auto;
			margin-right: 1rem;
		}
		#toc .content:hover {
			background: rgba(75%, 75%, 75%, .25);
			border-bottom: 3px solid #054572;
			margin-bottom: -3px;
		}
		#toc li li li .content {
			margin-left: 1rem;
		}
		#toc li li li li .content {
			margin-left: 2rem;
		}
	}


/** Index *********************************************************************/

	/* Index Lists: Layout */
	ul.index       { margin-left: 0; columns: 15em; text-indent: 1em hanging; }
	ul.index li    { margin-left: 0; list-style: none; break-inside: avoid; }
	ul.index li li { margin-left: 1em }
	ul.index dl    { margin-top: 0; }
	ul.index dt    { margin: .2em 0 .2em 20px;}
	ul.index dd    { margin: .2em 0 .2em 40px;}
	/* Index Lists: Typography */
	ul.index ul,
	ul.index dl { font-size: smaller; }
	@media not print {
		ul.index li span {
			white-space: nowrap;
			color: transparent; }
		ul.index li a:hover + span,
		ul.index li a:focus + span {
			color: #707070;
		}
	}

/** Index Tables *****************************************************/
	/* See also the data table styling section, which this effectively subclasses */

	table.index {
		font-size: small;
		border-collapse: collapse;
		border-spacing: 0;
		text-align: left;
		margin: 1em 0;
	}

	table.index td,
	table.index th {
		padding: 0.4em;
	}

	table.index tr:hover td:not([rowspan]),
	table.index tr:hover th:not([rowspan]) {
		background: #f7f8f9;
	}

	/* The link in the first column in the property table (formerly a TD) */
	table.index th:first-child a {
		font-weight: bold;
	}

/******************************************************************************/
/*                                    Print                                   */
/******************************************************************************/

	@media print {
		/* Pages have their own margins. */
		html {
			margin: 0;
		}
		/* Serif for print. */
		body {
			font-family: serif;
		}
	}
	@page {
		margin: 1.5cm 1.1cm;
	}

/******************************************************************************/
/*                                    Legacy                                  */
/******************************************************************************/

	/* This rule is inherited from past style sheets. No idea what it's for. */
	.hide { display: none }



/******************************************************************************/
/*                             Overflow Control                               */
/******************************************************************************/

	.figure .caption, .sidefigure .caption, figcaption {
		/* in case figure is overlarge, limit caption to 50em */
		max-width: 50rem;
		margin-left: auto;
		margin-right: auto;
	}
	.overlarge {
		/* Magic to create good table positioning:
		   "content column" is 50ems wide at max; less on smaller screens.
		   Extra space (after ToC + content) is empty on the right.

		   1. When table < content column, centers table in column.
		   2. When content < table < available, left-aligns.
		   3. When table > available, fills available + scroll bar.
		*/ 
		display: grid;
		grid-template-columns: minmax(0, 50em);
	}
	.overlarge > table {
		/* limit preferred width of table */
		max-width: 50em;
		margin-left: auto;
		margin-right: auto;
	}

	@media (min-width: 55em) {
		.overlarge {
			margin-right: calc(13px + 26.5rem - 50vw);
			max-width: none;
		}
	}
	@media screen and (min-width: 78em) {
		body:not(.toc-inline) .overlarge {
			/* 30.5em body padding 50em content area */
			margin-right: calc(40em - 50vw) !important;
		}
	}
	@media screen and (min-width: 90em) {
		body:not(.toc-inline) .overlarge {
			/* 4em html margin 30.5em body padding 50em content area */
			margin-right: calc(84.5em - 100vw) !important;
		}
	}

	@media not print {
		.overlarge {
			overflow-x: auto;
			/* See Lea Verou's explanation background-attachment:
			 * http://lea.verou.me/2012/04/background-attachment-local/
			 *
			background: top left  / 4em 100% linear-gradient(to right,  #ffffff, rgba(255, 255, 255, 0)) local,
			            top right / 4em 100% linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0)) local,
			            top left  / 1em 100% linear-gradient(to right,  #c3c3c5, rgba(195, 195, 197, 0)) scroll,
			            top right / 1em 100% linear-gradient(to left, #c3c3c5, rgba(195, 195, 197, 0)) scroll,
			            white;
			background-repeat: no-repeat;
			*/
		}
	}
</style>
  <link href="https://www.w3.org/StyleSheets/TR/2016/cg-draft" rel="stylesheet">
  <link href="http://webbluetoothcg.github.io/web-bluetooth/use-cases.html" rel="canonical">
<style>/* style-md-lists */

/* This is a weird hack for me not yet following the commonmark spec
   regarding paragraph and lists. */
[data-md] > :first-child {
    margin-top: 0;
}
[data-md] > :last-child {
    margin-bottom: 0;
}</style>
<style>/* style-counters */

body {
    counter-reset: example figure issue;
}
.issue {
    counter-increment: issue;
}
.issue:not(.no-marker)::before {
    content: "Issue " counter(issue);
}

.example {
    counter-increment: example;
}
.example:not(.no-marker)::before {
    content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
    content: "Invalid Example" counter(example);
}

figcaption {
    counter-increment: figure;
}
figcaption:not(.no-marker)::before {
    content: "Figure " counter(figure) " ";
}</style>
<style>/* style-selflinks */

.heading, .issue, .note, .example, li, dt {
    position: relative;
}
a.self-link {
    position: absolute;
    top: 0;
    left: calc(-1 * (3.5rem - 26px));
    width: calc(3.5rem - 26px);
    height: 2em;
    text-align: center;
    border: none;
    transition: opacity .2s;
    opacity: .5;
}
a.self-link:hover {
    opacity: 1;
}
.heading > a.self-link {
    font-size: 83%;
}
li > a.self-link {
    left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
    top: auto;
    left: auto;
    opacity: 0;
    width: 1.5em;
    height: 1.5em;
    background: gray;
    color: white;
    font-style: normal;
    transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
    opacity: 1;
}
dfn > a.self-link:hover {
    color: black;
}

a.self-link::before            { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before      { content: "#"; }</style>
<style>/* style-autolinks */

.css.css, .property.property, .descriptor.descriptor {
    color: #005a9c;
    font-size: inherit;
    font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
    content: "‘";
}
.css::after, .property::after, .descriptor::after {
    content: "’";
}
.property, .descriptor {
    /* Don't wrap property and descriptor names */
    white-space: nowrap;
}
.type { /* CSS value <type> */
    font-style: italic;
}
pre .property::before, pre .property::after {
    content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
    content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
    content: "’";
}

[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
    content: "";
}

[data-link-type=element],
[data-link-type=element-attr] {
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after  { content: ">" }

[data-link-type=biblio] {
    white-space: pre;
}</style>
 <body class="h-entry">
  <div class="head">
   <p data-fill-with="logo"></p>
   <h1 class="p-name no-ref" id="title">Web Bluetooth Use Cases</h1>
   <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Draft Community Group Report, <time class="dt-updated" datetime="1970-01-01">1 January 1970</time></span></h2>
   <div data-fill-with="spec-metadata">
    <dl>
     <dt>This version:
     <dd><a class="u-url" href="http://webbluetoothcg.github.io/web-bluetooth/use-cases.html">http://webbluetoothcg.github.io/web-bluetooth/use-cases.html</a>
     <dt class="editor">Editor:
     <dd class="editor p-author h-card vcard"><a class="p-name fn u-url url" href="https://github.com/WebBluetoothCG/web-bluetooth/graphs/contributors">See contributors on GitHub</a>
     <dt>Participate:
     <dd><a href="https://www.w3.org/community/web-bluetooth/">Join the W3C Community Group</a>
     <dd><a href="https://github.com/WebBluetoothCG/web-bluetooth">Fix the text through GitHub</a>
     <dd><a href="mailto:public-web-bluetooth@w3.org">public-web-bluetooth@w3.org</a> (<a href="https://lists.w3.org/Archives/Public/public-web-bluetooth/" rel="discussion">archives</a>)
     <dd><a href="irc://irc.w3.org:6665/#web-bluetooth">IRC: #web-bluetooth on W3C’s IRC</a>
     <dd>
    </dl>
   </div>
   <div data-fill-with="warning"></div>
   <p class="copyright" data-fill-with="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 1970 the Contributors to the Web Bluetooth Specification, published by the <a href="https://www.w3.org/community/web-bluetooth/">Web Bluetooth Community Group</a> under the <a href="https://www.w3.org/community/about/agreements/cla/">W3C Community Contributor License Agreement (CLA)</a>.
A human-readable <a href="http://www.w3.org/community/about/agreements/cla-deed/">summary</a> is available. </p>
   <hr title="Separator for header">
  </div>
  <div class="p-summary" data-fill-with="abstract">
   <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
   <p>This specification provides a collection of use cases for Bluetooth in the web platform.</p>
  </div>
  <h2 class="no-num no-toc no-ref heading settled" id="status"><span class="content">Status of this document</span></h2>
  <div data-fill-with="status">
   <p> This specification was published by the <a href="https://www.w3.org/community/web-bluetooth/">Web Bluetooth Community Group</a>.
  It is not a W3C Standard nor is it on the W3C Standards Track.

  Please note that under the <a href="https://www.w3.org/community/about/agreements/cla/">W3C Community Contributor License Agreement (CLA)</a> there is a limited opt-out and other conditions apply.

  Learn more about <a href="http://www.w3.org/community/">W3C Community and Business Groups</a>. </p>
   <p> Changes to this document may be tracked at <a href="https://github.com/WebBluetoothCG/web-bluetooth/commits/gh-pages">https://github.com/WebBluetoothCG/web-bluetooth/commits/gh-pages</a>. </p>
   <p>If you wish to make comments regarding this document, please send them to <a href="mailto:public-web-bluetooth@w3.org">public-web-bluetooth@w3.org</a> (<a href="mailto:public-web-bluetooth-request@w3.org?subject=subscribe">subscribe</a>, <a href="http://lists.w3.org/Archives/Public/public-web-bluetooth/">archives</a>).</p>
   <p></p>
  </div>
  <div data-fill-with="at-risk"></div>
  <nav data-fill-with="table-of-contents" id="toc">
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory">
    <li><a href="#introduction"><span class="secno">1</span> <span class="content">Introduction</span></a>
    <li>
     <a href="#usecases_and_requirements"><span class="secno">2</span> <span class="content">Use-Cases and Requirements</span></a>
     <ol class="toc">
      <li><a href="#usecases"><span class="secno">2.1</span> <span class="content">Use-Cases</span></a>
      <li><a href="#requirements_section"><span class="secno">2.2</span> <span class="content">Requirements</span></a>
     </ol>
    <li>
     <a href="#security_privacy"><span class="secno">3</span> <span class="content">Security and Privacy Considerations</span></a>
     <ol class="toc">
      <li><a href="#risks"><span class="secno">3.1</span> <span class="content">Risks</span></a>
      <li><a href="#secpriv_requirements"><span class="secno">3.2</span> <span class="content">Security and Privacy Requirements</span></a>
     </ol>
    <li><a href="#conformance"><span class="secno"></span> <span class="content"> Conformance</span></a>
    <li>
     <a href="#references"><span class="secno"></span> <span class="content">References</span></a>
     <ol class="toc">
      <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
      <li><a href="#informative"><span class="secno"></span> <span class="content">Informative References</span></a>
     </ol>
    <li><a href="#issues-index"><span class="secno"></span> <span class="content">Issues Index</span></a>
   </ol>
  </nav>
  <main>
   <section>
    <h2 class="heading settled" data-level="1" id="introduction"><span class="secno">1. </span><span class="content">Introduction</span><a class="self-link" href="#introduction"></a></h2>
    <p>We intend to define an API that uses <a href="https://developer.bluetooth.org/">Bluetooth</a> to discover and communicate with devices.
    This document collects use cases for such an API. </p>
   </section>
   <section>
    <h2 class="heading settled" data-level="2" id="usecases_and_requirements"><span class="secno">2. </span><span class="content">Use-Cases and Requirements</span><a class="self-link" href="#usecases_and_requirements"></a></h2>
    <section>
     <h3 class="heading settled" data-level="2.1" id="usecases"><span class="secno">2.1. </span><span class="content">Use-Cases</span><a class="self-link" href="#usecases"></a></h3>
     <p> These are potential use cases for Bluetooth in general,
      but they may not all be supported in
      the initial versions of the <a href="index.html">Web Bluetooth API</a>. </p>
     <section>
      <h4 class="heading settled" data-level="2.1.1" id="usecase_new_device_vendor_site"><span class="secno">2.1.1. </span><span class="content">Designer of a new device writes a web page to control that device</span><a class="self-link" href="#usecase_new_device_vendor_site"></a></h4>
      <p>A group making a product like <a href="https://www.fitbit.com/">Fitbit</a>, a <a href="https://www.sportchalet.com/product/302090_3192991.do">heart rate monitor</a>, or a <a href="https://www.walmart.com/ip/37650811">singing lightbulb</a> can write a web site that users can navigate to and control their device. </p>
      <p>Other devices include: </p>
      <ul>
       <li> <a href="http://amzn.com/B007HOGNLW">Bicycle cadence sensor</a> (<a href="https://developer.bluetooth.org/gatt/profiles/Pages/ProfileViewer.aspx?u=org.bluetooth.profile.cycling_speed_and_cadence.xml">standard profile</a>) 
       <li><a href="http://www.barcodegiant.com/unitech/part-ms840-subbgc-sg.htm">Barcode scanner</a> 
       <li><a href="http://www.bhphotovideo.com/bnh/controller/home?sku=1024990&amp;Q=&amp;is=REG&amp;A=details">BT security tags</a> 
       <li><a href="http://www.mobilefun.com/44028-parrot-flower-power-bluetooth-indooroutdoor-plant-sensor-green.htm">BT plant sensors</a> 
       <li> <a href="http://www.bhphotovideo.com/bnh/controller/home?O=&amp;sku=1014794&amp;Q=&amp;is=REG&amp;A=details">Camera shutter remote</a> (this may be a <a href="https://developer.bluetooth.org/gatt/profiles/Pages/ProfileViewer.aspx?u=org.bluetooth.profile.hid_over_gatt.xml">HID device</a>) 
       <li><a href="http://www.weatherconnection.com/product.asp?itmky=148800">BT weather station</a> 
       <li><a href="http://www.escali.com/smartconnect-kitchen-scale">BT kitchen scale</a> 
       <li><a href="http://www.houseofscuba.com/computers/com113.html">BT enabled dive logger</a> 
       <li><a href="http://www.thinkgeek.com/product/1898/">Robotic car</a> 
      </ul>
     </section>
     <section>
      <h4 class="heading settled" data-level="2.1.2" id="usecase_third_party_site"><span class="secno">2.1.2. </span><span class="content">Third party  writes a web page to control a device</span><a class="self-link" href="#usecase_third_party_site"></a></h4>
      <p> Not only original manufacturers should be able to interact with devices.
        It should be possible to write a single page that can pull your heart rate data from <a href="https://www.sportchalet.com/product/302090_3192991.do">lots</a> <a href="http://www.heartratemonitorsusa.com/polar-h7-transmitter.html">of</a> <a href="http://www.amazon.com/Jarv-Premium-Bluetooth%C2%AE-Monitor-Motorola/dp/B00GWSQFPS">different</a> <a href="http://www.cellphoneshop.net/heartmonitor.html">heart</a> <a href="http://www.wtek-usa.com/hs2bt_strapless_bluetooth_heart_rate_sensor.php">rate</a> <a href="http://www.amazon.com/Wahoo-Heart-Monitor-iPhone-Android/dp/B006NZH0TU">monitors</a>. </p>
     </section>
     <section>
      <h4 class="heading settled" data-level="2.1.3" id="usecase_lazy_scale"><span class="secno">2.1.3. </span><span class="content">Bluetooth <abbr title="Low Energy">LE</abbr> scale begins advertising after the user has opened its web page.</span><a class="self-link" href="#usecase_lazy_scale"></a></h4>
      <p>A user opens their <a href="https://www.amazon.com/WiTscale-S1-Bluetooth-Bathroom-Technology/dp/B009RGD6I6"><abbr title="Bluetooth Low Energy">BTLE</abbr> scale</a>’s website before they step onto their scale.
        They may also be in range of several unrelated Bluetooth devices when they first open the website.
        Stepping onto the scale turns on the Bluetooth transmitter, at which point the website begins pulling data from the scale. </p>
     </section>
     <section>
      <h4 class="heading settled" data-level="2.1.4" id="usecase_device_url"><span class="secno">2.1.4. </span><span class="content">Device advertised URL opened by user.</span><a class="self-link" href="#usecase_device_url"></a></h4>
      <p>As described in <a href="https://github.com/scottjenson/physical-web">Physical Web</a>, devices may advertise a URL for the convenience of users who wish to interact.
        Launching an advertised URL loads a website with the device already paired and available for communication.</p>
      <p>E.G. a user approaches a parking meter and wishes to make a payment.
        They look at their mobile’s user interface for nearby device discovery provided by the operating system, browser, or app.
        Upon selecting the parking meter the web browser is launched with the URL provided by the parking meter.
        The website is then able to communicate with the parking meter without requiring further pairing user interface. </p>
     </section>
     <section>
      <h4 class="heading settled" data-level="2.1.5" id="usecase_nfc_handover"><span class="secno">2.1.5. </span><span class="content">NFC Handover.</span><a class="self-link" href="#usecase_nfc_handover"></a></h4>
      <p> <em>Likely unsupported initially because of the immaturity of <a data-link-type="biblio" href="#biblio-nfc">[nfc]</a>.</em> </p>
      <p>A website may already have established a <a href="https://en.wikipedia.org/wiki/Near_field_communication">Near Field Communication</a> (<abbr title="Near Field Communication">NFC</abbr>) channel with a device via <a data-link-type="biblio" href="#biblio-nfc">[nfc]</a> and then initiate a Bluetooth connection.
          As security for communication with the device has already been established in the NFC channel the transition to Bluetooth communication may proceed without interrupting the user for pairing with the device.</p>
      <p>E.G. a set of two users wish to play a game together.
        They both load a given website which prompts to pair using NFC by tapping devices together.
        Upon tapping the devices handover the connection from NFC to Bluetooth, enabling playing while sitting in the same room. </p>
     </section>
     <section>
      <h4 class="heading settled" data-level="2.1.6" id="usecase_beacon"><span class="secno">2.1.6. </span><span class="content">Beacons</span><a class="self-link" href="#usecase_beacon"></a></h4>
      <p> <em>Likely unsupported initially because of
          the <a href="#risk_class_pairing_data_leak">privacy risks</a> of granting access to a class of devices.</em> </p>
      <p> Bluetooth beacons can allow a web page to get precise indoor location or to detect distance to interesting physical objects. <a href="http://en.wikipedia.org/wiki/IBeacon">iBeacon</a> and <a href="https://www.paypal.com/webapps/mpp/beacon">PayPal Beacons</a> are particularly famous examples. </p>
     </section>
     <section>
      <h4 class="heading settled" data-level="2.1.7" id="usecase_audio_control"><span class="secno">2.1.7. </span><span class="content">Audio control</span><a class="self-link" href="#usecase_audio_control"></a></h4>
      <p> The process of playing audio to a Bluetooth speaker or
        recording from a Bluetooth microphone should be handled by a combination of the <code><a href="http://dev.w3.org/2011/webrtc/editor/getusermedia.html#enumerating-devices">navigator.mediaDevices</a></code> and <a href="http://webaudio.github.io/web-audio-api/#AudioDestinationNode">WebAudio</a> APIs.
        Websites shouldn’t need to deal with the Bluetooth audio protocol
        in order to simply play or record sound.
        However, speakers and microphones can also expose a metadata channel,
        for example to control hardware volume, balance,
        or even report the position of the user’s head. </p>
      <p> A user should be able to pair a device to a site in a single interaction,
        rather than needing separate actions for each API the site wants to use.
        The site should be able to associate representations of the same device
        across multiple APIs. </p>
     </section>
    </section>
    <section>
     <h3 class="heading settled" data-level="2.2" id="requirements_section"><span class="secno">2.2. </span><span class="content">Requirements</span><a class="self-link" href="#requirements_section"></a></h3>
     <section>
      <h4 class="heading settled" data-level="2.2.1" id="req_request"><span class="secno">2.2.1. </span><span class="content">The Bluetooth API must allow websites to request access to devices they know how to interact with.</span><a class="self-link" href="#req_request"></a></h4>
     </section>
     <section>
      <h4 class="heading settled" data-level="2.2.2" id="req_watch"><span class="secno">2.2.2. </span><span class="content">The Bluetooth API must allow websites to watch for new devices.</span><a class="self-link" href="#req_watch"></a></h4>
     </section>
     <section>
      <h4 class="heading settled" data-level="2.2.3" id="req_previous_action"><span class="secno">2.2.3. </span><span class="content">The Bluetooth API should be able to pair a site with a device based on previous user action linking the two.</span><a class="self-link" href="#req_previous_action"></a></h4>
      <p> For example, an <abbr title="Operating System">OS</abbr> chooser in which the user selects a particular web site or a previously-consented NFC connection should be sufficient.
        These may only be sufficient to pair for the duration of the session, rather than permanently. </p>
     </section>
    </section>
   </section>
   <section>
    <h2 class="heading settled" data-level="3" id="security_privacy"><span class="secno">3. </span><span class="content">Security and Privacy Considerations</span><a class="self-link" href="#security_privacy"></a></h2>
    <section>
     <h3 class="heading settled" data-level="3.1" id="risks"><span class="secno">3.1. </span><span class="content">Risks</span><a class="self-link" href="#risks"></a></h3>
     <section>
      <h4 class="heading settled" data-level="3.1.1" id="kernel_attack_surface"><span class="secno">3.1.1. </span><span class="content">Exposes a larger kernel attack surface</span><a class="self-link" href="#kernel_attack_surface"></a></h4>
      <p>Bluetooth drivers are complex. Unless a very narrow, well-defined API is exposed to
        websites through Web Bluetooth, this has the potential to expose a large kernel attack
        surface to users. For sandboxed user agents, this attack surface would essentially be
        exposed to the untrusted content, as arbitrary bytes would be controllable by the
        renderer, unless a very narrow and well defined API is used and can be audited
        carefully.</p>
      <p>For example, compared to the <a href="http://webaudio.github.io/web-audio-api/#AudioDestinationNode">WebAudio</a> API, Bluetooth drivers are probably handle data in a much more complex way and with more
        complicated abstractions. This leads to a much larger kernel surface area for
        attackers.</p>
     </section>
     <section>
      <h4 class="heading settled" data-level="3.1.2" id="device_management_attacks"><span class="secno">3.1.2. </span><span class="content">XSS and CSRF attacks on a device</span><a class="self-link" href="#device_management_attacks"></a></h4>
      <p>Even if a user only exposes a device to the correct origin, if that origin is not
        correctly protected, they are exposing the device to XSS and CSRF attacks, where an
        attacker could modify, delete, or read data from the device, not just the origin.
        Expressing these risks to users will be a difficult task. This potentially could be
        mitigated by requiring a user interaction for any explicit code to be executed, so in that
        way it couldn’t at least happen silently.</p>
      <p>Currently, the Same Origin Policy basically makes it so even if a site is compromised,
        the damage is limited to that origin (that is to say, your local browsing instance and the
        server you’re communicating with).  With the addition of Bluetooth or similar permissions,
        all of a sudden, an XSS or CSRF potentially affects devices as well. In some ways, you can
        think of this as an entirely new and privileged domain. Or, alternatively, you could view
        the device as being added to the origin. In either case, communicating that to the user in
        a meaningful way is going to be tough/impossible. This changes the promise user agents
        have been making to users.</p>
     </section>
     <section>
      <h4 class="heading settled" data-level="3.1.3" id="risk_vulnerable_device"><span class="secno">3.1.3. </span><span class="content">A malicious website could exploit a vulnerable device</span><a class="self-link" href="#risk_vulnerable_device"></a></h4>
      <p>Like with <a data-link-type="biblio" href="#biblio-webgl">[WebGL]</a>, we should expect that many Bluetooth devices were designed to be accessed only by trusted code.
        Exposing them to the web will expose many more vulnerabilities which could result in anything from persistent misbehavior to complete reprogramming of the device’s Bluetooth controller.
        A reprogrammed Bluetooth controller could potentially turn around and attack the user’s computer, for example by pretending to be a Bluetooth keyboard. </p>
     </section>
     <section>
      <h4 class="heading settled" data-level="3.1.4" id="risk_unexpected_use"><span class="secno">3.1.4. </span><span class="content">A website the user didn’t expect gets access to personal data</span><a class="self-link" href="#risk_unexpected_use"></a></h4>
      <p>A user visits a news website and is shown articles based on data pulled from their diabetes monitor. </p>
     </section>
     <section>
      <h4 class="heading settled" data-level="3.1.5" id="risk_unpaired_data_leak"><span class="secno">3.1.5. </span><span class="content">A website learns the user’s location by accessing devices that don’t require pairing</span><a class="self-link" href="#risk_unpaired_data_leak"></a></h4>
      <p>Some Bluetooth devices don’t need to be paired in order for a computer to use them, often because they don’t control any information that needs to be private from devices near them.
        Without pairing between the website and the otherwise non-pairing device, casual surfing may leak private data about the user such as location identifying information from non-paired devices. </p>
      <p class="issue" id="issue-2bc4cef6"><a class="self-link" href="#issue-2bc4cef6"></a>Give a more detailed description here involving specific devices. </p>
     </section>
     <section>
      <h4 class="heading settled" data-level="3.1.6" id="risk_class_pairing_data_leak"><span class="secno">3.1.6. </span><span class="content">A website tracks the user’s location by pairing to and accessing an entire class of devices</span><a class="self-link" href="#risk_class_pairing_data_leak"></a></h4>
      <p> A store might offer details about an item using a Bluetooth device attached to a particular display.
        If the site asks for access to this entire class of devices rather than the individual device,
        and members of the device class are scattered around the environment,
        the site is likely to be able to discover the user’s location in most cases that the site is opened. </p>
      <p> Giving access in the background (in a <a href="https://slightlyoff.github.io/ServiceWorker/spec/service_worker/index.html">Service Worker</a>)
        would give the site the user’s location even when it was closed. </p>
     </section>
     <section>
      <h4 class="heading settled" data-level="3.1.7" id="risk_tracking"><span class="secno">3.1.7. </span><span class="content">A website tracks a user across cookie reset using Bluetooth device IDs</span><a class="self-link" href="#risk_tracking"></a></h4>
      <p>When a website with access to any Bluetooth device finds its cookies reset, it can connect the user back to their previous server data using the immutable, unique Bluetooth device ID. </p>
     </section>
     <section>
      <h4 class="heading settled" data-level="3.1.8" id="risk_active_scan"><span class="secno">3.1.8. </span><span class="content">Certain active scan requests allow tracking a device’s location</span><a class="self-link" href="#risk_active_scan"></a></h4>
      <p> When a BTLE Central or Observer device is scanning for advertising packets and receives one from a Peripheral or Broadcaster, it can send a "scan request" (<code>SCAN_REQ</code>) to the Peripheral in order to receive more data. (<a data-link-type="biblio" href="#biblio-bluetooth42">[BLUETOOTH42]</a> 6.B.2.3.2.1)
        The scan request may contain a persistent ID for the Central device, which would allow a malicious Peripheral to report the location of the Central device.
        If a website causes enough active scanning and enough malicious Peripherals are scattered around the environment, this could allow tracking a device’s location.
        The "privacy feature" (<a data-link-type="biblio" href="#biblio-bluetooth42">[BLUETOOTH42]</a> 3.C.10.7)) makes it more difficult to track devices by rotating their address every <code>T<sub>GAP</sub>(private_addr_int)</code> minutes (recommended to be 15 minutes: (<a data-link-type="biblio" href="#biblio-bluetooth42">[BLUETOOTH42]</a> 3.C.17))). </p>
     </section>
    </section>
    <section>
     <h3 class="heading settled" data-level="3.2" id="secpriv_requirements"><span class="secno">3.2. </span><span class="content">Security and Privacy Requirements</span><a class="self-link" href="#secpriv_requirements"></a></h3>
     <section>
      <h4 class="heading settled" data-level="3.2.1" id="secprvreq_protocol_restriction"><span class="secno">3.2.1. </span><span class="content">The Bluetooth API must only expose those parts of the general Bluetooth protocol that present an acceptable risk of exploit.</span><a class="self-link" href="#secprvreq_protocol_restriction"></a></h4>
      <p>The spec should provide guidance to implementers on ways to mitigate exploits further. For example, a mechanism similar to the <a href="https://www.khronos.org/webgl/wiki/BlacklistsAndWhitelists">GPU Blacklist</a> may be appropriate. </p>
     </section>
     <section>
      <h4 class="heading settled" data-level="3.2.2" id="secprvreq_pairing"><span class="secno">3.2.2. </span><span class="content">Users must explicitly grant particular websites access to particular devices, even if the device does not intrinsically require pairing.</span><a class="self-link" href="#secprvreq_pairing"></a></h4>
     </section>
     <section>
      <h4 class="heading settled" data-level="3.2.3" id="secprvreq_tracking"><span class="secno">3.2.3. </span><span class="content">The website-visible ID for any particular device must change when that website’s cookies are reset.</span><a class="self-link" href="#secprvreq_tracking"></a></h4>
      <p class="issue" id="issue-efdf35af"><a class="self-link" href="#issue-efdf35af"></a> This doesn’t completely mitigate the risk,
        since a malicious device can embed a unique ID in any other piece of the protocol it speaks.
        Check with privacy folks if there’s anything better we can do. </p>
     </section>
     <section>
      <h4 class="heading settled" data-level="3.2.4" id="secprvreq_passive"><span class="secno">3.2.4. </span><span class="content">Scans must either enable the Bluetooth privacy feature or must use passive scanning until the user has indicated interest in information from the active scan.</span><a class="self-link" href="#secprvreq_passive"></a></h4>
     </section>
    </section>
   </section>
  </main>
  <div data-fill-with="conformance">
   <h2 class="no-ref no-num heading settled" id="conformance"><span class="content"> Conformance</span><a class="self-link" href="#conformance"></a></h2>
   <p> Conformance requirements are expressed with a combination of descriptive assertions and RFC 2119 terminology.
            The key words “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL”
            in the normative parts of this document
            are to be interpreted as described in RFC 2119.
            However, for readability,
            these words do not appear in all uppercase letters in this specification. </p>
   <p> All of the text of this specification is normative
            except sections explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a> </p>
   <p> Examples in this specification are introduced with the words “for example”
            or are set apart from the normative text with <code>class="example"</code>, like this: </p>
   <div class="example" id="example-example"><a class="self-link" href="#example-example"></a> This is an example of an informative example. </div>
   <p> Informative notes begin with the word “Note”
            and are set apart from the normative text with <code>class="note"</code>, like this: </p>
   <p class="note" role="note"> Note, this is an informative note. </p>
  </div>
<script>
(function() {
  "use strict";
  var collapseSidebarText = '<span aria-hidden="true">←</span> '
                          + '<span>Collapse Sidebar</span>';
  var expandSidebarText   = '<span aria-hidden="true">→</span> '
                          + '<span>Pop Out Sidebar</span>';
  var tocJumpText         = '<span aria-hidden="true">↑</span> '
                          + '<span>Jump to Table of Contents</span>';

  var sidebarMedia = window.matchMedia('screen and (min-width: 78em)');
  var autoToggle   = function(e){ toggleSidebar(e.matches) };
  if(sidebarMedia.addListener) {
    sidebarMedia.addListener(autoToggle);
  }

  function toggleSidebar(on) {
    if (on == undefined) {
      on = !document.body.classList.contains('toc-sidebar');
    }

    /* Don’t scroll to compensate for the ToC if we’re above it already. */
    var headY = 0;
    var head = document.querySelector('.head');
    if (head) {
      // terrible approx of "top of ToC"
      headY += head.offsetTop + head.offsetHeight;
    }
    var skipScroll = window.scrollY < headY;

    var toggle = document.getElementById('toc-toggle');
    var tocNav = document.getElementById('toc');
    if (on) {
      var tocHeight = tocNav.offsetHeight;
      document.body.classList.add('toc-sidebar');
      document.body.classList.remove('toc-inline');
      toggle.innerHTML = collapseSidebarText;
      if (!skipScroll) {
        window.scrollBy(0, 0 - tocHeight);
      }
      tocNav.focus();
      sidebarMedia.addListener(autoToggle); // auto-collapse when out of room
    }
    else {
      document.body.classList.add('toc-inline');
      document.body.classList.remove('toc-sidebar');
      toggle.innerHTML = expandSidebarText;
      if (!skipScroll) {
        window.scrollBy(0, tocNav.offsetHeight);
      }
      if (toggle.matches(':hover')) {
        /* Unfocus button when not using keyboard navigation,
           because I don’t know where else to send the focus. */
        toggle.blur();
      }
    }
  }

  function createSidebarToggle() {
    /* Create the sidebar toggle in JS; it shouldn’t exist when JS is off. */
    var toggle = document.createElement('a');
      /* This should probably be a button, but appearance isn’t standards-track.*/
    toggle.id = 'toc-toggle';
    toggle.class = 'toc-toggle';
    toggle.href = '#toc';
    toggle.innerHTML = collapseSidebarText;

    sidebarMedia.addListener(autoToggle);
    var toggler = function(e) {
      e.preventDefault();
      sidebarMedia.removeListener(autoToggle); // persist explicit off states
      toggleSidebar();
      return false;
    }
    toggle.addEventListener('click', toggler, false);


    /* Get <nav id=toc-nav>, or make it if we don’t have one. */
    var tocNav = document.getElementById('toc-nav');
    if (!tocNav) {
      tocNav = document.createElement('p');
      tocNav.id = 'toc-nav';
      /* Prepend for better keyboard navigation */
      document.body.insertBefore(tocNav, document.body.firstChild);
    }
    /* While we’re at it, make sure we have a Jump to Toc link. */
    var tocJump = document.getElementById('toc-jump');
    if (!tocJump) {
      tocJump = document.createElement('a');
      tocJump.id = 'toc-jump';
      tocJump.href = '#toc';
      tocJump.innerHTML = tocJumpText;
      tocNav.appendChild(tocJump);
    }

    tocNav.appendChild(toggle);
  }

  var toc = document.getElementById('toc');
  if (toc) {
    createSidebarToggle();
    toggleSidebar(sidebarMedia.matches);

    /* If the sidebar has been manually opened and is currently overlaying the text
       (window too small for the MQ to add the margin to body),
       then auto-close the sidebar once you click on something in there. */
    toc.addEventListener('click', function(e) {
      if(e.target.tagName.toLowerCase() == "a" && document.body.classList.contains('toc-sidebar') && !sidebarMedia.matches) {
        toggleSidebar(false);
      }
    }, false);
  }
  else {
    console.warn("Can’t find Table of Contents. Please use <nav id='toc'> around the ToC.");
  }

  /* Wrap tables in case they overflow */
  var tables = document.querySelectorAll(':not(.overlarge) > table.data, :not(.overlarge) > table.index');
  var numTables = tables.length;
  for (var i = 0; i < numTables; i++) {
    var table = tables[i];
    var wrapper = document.createElement('div');
    wrapper.className = 'overlarge';
    table.parentNode.insertBefore(wrapper, table);
    wrapper.appendChild(table);
  }

})();
</script>
  <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2>
  <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3>
  <dl>
   <dt id="biblio-rfc2119">[RFC2119]
   <dd>S. Bradner. <a href="https://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href="https://tools.ietf.org/html/rfc2119">https://tools.ietf.org/html/rfc2119</a>
  </dl>
  <h3 class="no-num no-ref heading settled" id="informative"><span class="content">Informative References</span><a class="self-link" href="#informative"></a></h3>
  <dl>
   <dt id="biblio-bluetooth42">[BLUETOOTH42]
   <dd><a href="https://www.bluetooth.org/DocMan/handlers/DownloadDoc.ashx?doc_id=286439">BLUETOOTH SPECIFICATION Version 4.2</a>. 2 December 2014. URL: <a href="https://www.bluetooth.org/DocMan/handlers/DownloadDoc.ashx?doc_id=286439">https://www.bluetooth.org/DocMan/handlers/DownloadDoc.ashx?doc_id=286439</a>
   <dt id="biblio-nfc">[NFC]
   <dd>Luc Yriarte; Samuel Ortiz; Don Coleman. <a href="https://www.w3.org/TR/nfc/">Web NFC API</a>. 16 June 2015. NOTE. URL: <a href="https://www.w3.org/TR/nfc/">https://www.w3.org/TR/nfc/</a>
   <dt id="biblio-webgl">[WebGL]
   <dd>Dean Jackson; Jeff Gilbert. <a href="https://www.khronos.org/registry/webgl/specs/latest/2.0/">WebGL 2.0 Specification</a>. 12 August 2017. URL: <a href="https://www.khronos.org/registry/webgl/specs/latest/2.0/">https://www.khronos.org/registry/webgl/specs/latest/2.0/</a>
  </dl>
  <h2 class="no-num no-ref heading settled" id="issues-index"><span class="content">Issues Index</span><a class="self-link" href="#issues-index"></a></h2>
  <div style="counter-reset:issue">
   <div class="issue">Give a more detailed description here involving specific devices. <a href="#issue-2bc4cef6"> ↵ </a></div>
   <div class="issue"> This doesn’t completely mitigate the risk,
        since a malicious device can embed a unique ID in any other piece of the protocol it speaks.
        Check with privacy folks if there’s anything better we can do. <a href="#issue-efdf35af"> ↵ </a></div>
  </div>